<template>
  <div class="classroomMamage">
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- 教室名称 -->
        <el-form-item label="教室名称" prop="roomName">
          <el-col :span="5">
            <el-input v-model="form.roomName" :value="form.roomName" width="80"></el-input>
          </el-col>
        </el-form-item>
        <!-- 教室类型 -->
        <el-form-item label="教室类型">
          <el-radio-group v-model="form.roomType">
            <el-radio label="0">一对一</el-radio>
            <el-radio label="1">一对多[注:一对一表示一个老师对一个学生的授课]</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 开始时间 -->
        <el-form-item label="开始时间">
          <el-radio-group v-model="form.startTimeType">
            <el-radio label="0">当前时间</el-radio>
            <el-radio label="1">自定义</el-radio>
          </el-radio-group>
          <span class="inner-cell" v-if="form.startTimeType === '1'">
            <el-form-item prop="startTime">
              <el-date-picker
                type="datetime"
                pro
                placeholder="选择日期"
                v-model="form.startTime"
                width="200"
                value-format="timestamp"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </span>
        </el-form-item>
        <!-- 结束时间 -->
        <el-form-item label="结束时间">
          <el-radio-group v-model="form.endTimeType">
            <el-radio label="0">自定义</el-radio>
          </el-radio-group>
          <span class="inner-cell">
            <el-form-item prop="endTime">
              <el-date-picker
                type="datetime"
                placeholder="选择日期"
                value-format="timestamp"
                v-model="form.endTime"
                width="200"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </span>
        </el-form-item>
        <!-- 教室密码 -->
        <el-form-item label="教室密码">
          <el-col :span="1" class="sub-lable">老师密码</el-col>
          <el-col :span="3">
            <el-form-item prop="teacherPwd">
              <el-input v-model="form.teacherPwd" width="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="sub-lable">助教密码</el-col>
          <el-col :span="3">
            <el-form-item prop="assistantPwd">
              <el-input v-model="form.assistantPwd" width="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="sub-lable">巡课密码</el-col>
          <el-col :span="3">
            <el-form-item prop="patrolPwd">
              <el-input v-model="form.patrolPwd" width="10"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 教室密码2 -->
        <el-form-item label>
          <el-col :span="1" class="sub-lable">学员密码</el-col>
          <el-col :span="3" style="margin-right:10px" v-if="form.studentPwdNeed">
            <el-form-item prop="studentPwd">
              <el-input v-model="form.studentPwd" width="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="margin-right:10px" v-if="!form.studentPwdNeed">
            <el-input v-model="form.name" width="10" disabled></el-input>
          </el-col>
          <el-checkbox-group v-model="form.studentPwdNeed">
            <el-checkbox label="0" name="type">需要密码</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 教室属性 -->
        <el-form-item label="教室属性">
          <el-checkbox-group v-model="form.autoVideo">
            <el-checkbox label="自动开启音视频" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 视频分辨率 -->
        <el-form-item label="视频分辨率">
          <el-select v-model="form.resolution" :placeholder="resolutionList[form.resolution]">
            <el-option
              v-for="(item,index) in resolutionList"
              v-bind:key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 视频帧率 -->
        <el-form-item label="视频帧率">
          <el-select v-model="form.region" placeholder="10">
            <el-option label="10" value="10"></el-option>
            <el-option label="15" value="15"></el-option>
            <el-option label="20" value="20"></el-option>
            <el-option label="25" value="25"></el-option>
            <el-option label="30" value="30"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教室布局" v-if="form.roomType === '0'">
          <el-col :span="24">
            <span class="roomLayout" @click="setRoomLayout(1)">
              <img class="img-room" src="@/assets/images/classroom/icon_layout_1.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 1"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
            <span class="roomLayout" @click="setRoomLayout(2)">
              <img class="img-room" src="@/assets/images/classroom/icon_layout_2.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 2"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
            <span class="roomLayout" @click="setRoomLayout(3)">
              <img class="img-room" src="@/assets/images/classroom/icon_layout_3.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 3"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
          </el-col>
        </el-form-item>
        <el-form-item label="教室布局" v-if="form.roomType === '1'">
          <el-col :span="24">
            <span class="roomLayout" @click="setRoomLayout(1)">
              <img class="img-room" src="@/assets/images/classroom/iconlayout_1.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 1"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
            <span class="roomLayout" @click="setRoomLayout(2)">
              <img class="img-room" src="@/assets/images/classroom/iconlayout_2.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 2"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
            <span class="roomLayout" @click="setRoomLayout(3)">
              <img class="img-room" src="@/assets/images/classroom/iconlayout_3.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 3"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
            <span class="roomLayout" @click="setRoomLayout(4)">
              <img class="img-room" src="@/assets/images/classroom/iconlayout_1.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 4"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
            <span class="roomLayout" @click="setRoomLayout(5)">
              <img class="img-room" src="@/assets/images/classroom/iconlayout_2.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 5"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
            <span class="roomLayout" @click="setRoomLayout(6)">
              <img class="img-room" src="@/assets/images/classroom/iconlayout_3.png" />
              <img
                class="icon-select"
                v-if="form.roomLayout == 6"
                src="@/assets/images/classroom/icon_layoutSelect.png"
              />
            </span>
          </el-col>
        </el-form-item>
        <el-form-item label="选择颜色">
          <span
            @click="setColor('purple')"
            :class="form.color == 'purple' ? 'color-box color-border1':'color-box'"
          >
            <div class="color-unit purple"></div>
          </span>
          <span
            @click="setColor('black')"
            :class="form.color == 'black' ? 'color-box color-border2':'color-box'"
          >
            <div class="color-unit black"></div>
          </span>
          <span
            @click="setColor('tigerlily')"
            :class="form.color == 'tigerlily' ? 'color-box color-border3':'color-box'"
          >
            <div class="color-unit tigerlily"></div>
          </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="mode=='add'" :disabled="disabled" @click="handleSubmit">保存</el-button>
          <el-button type="primary" v-if="mode=='edit'" :disabled="disabled" @click="handleEdit">编辑</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import http from "@/api/room";
import { formatDate, formatArray } from "@/utils";
export default {
  name: "addRoom",
  data() {
    return {
      http: http,
      mode: "add", //模式 add or edit
      disabled: false,
      params: {
        id: null, //教室id
        serial: null //教室编号
      },
      resolutionList: [
        //分辨率集合
        "80*48",
        "80*60",
        "160*120",
        "200*150",
        "320*180",
        "320*240",
        "640*360",
        "640*480",
        "960*540",
        "1280*720",
        "1920*1080"
      ],
      form: {
        roomName: "", //教室名称
        roomType: "0", //教室类型
        startTimeType: "0", //开始时间类型
        startTime: "", //开始时间
        endTimeType: "0", //结束时间类型
        endTime: "", //结束时间
        teacherPwd: "", //老师密码
        assistantPwd: "", //助教密码
        patrolPwd: "", //巡课密码
        studentPwd: "", //学员密码
        studentPwdNeed: true, //学员是否需要密码
        autoVideo: true, //是否自动开启音视频
        resolution: 6, //视频分辨率
        frames: "10", //视频帧数
        roomLayout: 1, //教室布局
        color: "purple" //颜色
      },
      rules: {
        roomName: [{ required: true, message: "请填写教室名称" }],
        startTime: [{ required: true, message: "请选择开始时间" }],
        endTime: [{ required: true, message: "请选择结束时间" }],
        teacherPwd: [
          { required: true, message: "请填写老师密码", trigger: "blur" },
        //   { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" }
        ],
        assistantPwd: [
          { required: true, message: "请填写助教密码", trigger: "blur" },
        //   { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" }
        ],
        patrolPwd: [
          { required: true, message: "请填写巡课密码", trigger: "blur" },
        //   { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" }
        ],
        studentPwd: [
          { required: true, message: "请填写学员密码", trigger: "blur" },
        //   { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    //新增
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        var form = this.form;
        this.disabled = true;
        if (valid) {
          //当前开始时间
          if (this.form.startTimeType === "0") {
            var data = new Date();
            this.form.startTime = Date.parse(new Date());
          }
          //判断密码重复
          var pwd_arr =new Array(form.teacherPwd, form.assistantPwd, form.patrolPwd, form.studentPwd)
          if(this.isRepeat(pwd_arr)){
            this.disabled = false;
            return this.$message.warning("密码重复");
          }
          //结束时间不得小于开始时间
          if(form.startTime>form.endTime){
              this.disabled = false;
              return this.$message.warning("结束时间不得小于开始时间！");
          }
          var userInfo = JSON.parse(sessionStorage.getItem("user"));
          var formData = {
            center_id: userInfo.center_id,
            roomname: form.roomName,
            roomtype: form.roomType === "0" ? 0 : 1,
            starttime: form.startTime / 1000,
            endtime: form.endTime / 1000,
            chairmanpwd: form.teacherPwd,
            assistantpwd: form.assistantPwd,
            patrolpwd: form.patrolPwd,
            passwordrequired: form.studentPwdNeed ? 1 : 0,
            confuserpwd: form.studentPwd,
            videotype: form.resolution,
            videoframerate: form.frames,
            autoopenav: form.autoVideo ? 1 : 0,
            roomlayout: form.roomLayout,
            colour: form.color,
            roominfo: ""
          };
          this.http.createClassroom(formData).then(res => {
            console.log(res.code === 110);
            this.$message.success(res.msg || "新增成功！");
            this.$router.push("classroom");
          });
        } 
        else {
          this.disabled = false;
          this.$message.warning("请填写完整信息");
        }
      });
      console.log(this.form);
    },
    //编辑
    handleEdit() {
      this.$refs["form"].validate(valid => {
        var form = this.form;
        this.disabled = true;
        if (valid) {
          //当前开始时间
          if (this.form.startTimeType === "0") {
            var data = new Date();
            this.form.startTime = Date.parse(new Date());
          }
          var pwd_arr =new Array(form.teacherPwd, form.assistantPwd, form.patrolPwd, form.studentPwd)
          if(this.isRepeat(pwd_arr)){
            this.disabled = false;
            return this.$message.warning("密码重复");
          }
           //结束时间不得小于开始时间
          if(form.startTime>form.endTime){
              this.disabled = false;
              return this.$message.warning("结束时间不得小于开始时间！");
          }
          var userInfo = JSON.parse(sessionStorage.getItem("user"));
          var formData = {
            center_id: userInfo.center_id,
            roomname: form.roomName,
            roomtype: form.roomType === "0" ? 0 : 1,
            starttime: form.startTime / 1000,
            endtime: form.endTime / 1000,
            chairmanpwd: form.teacherPwd,
            assistantpwd: form.assistantPwd,
            patrolpwd: form.patrolPwd,
            passwordrequired: form.studentPwdNeed ? 1 : 0,
            confuserpwd: form.studentPwd,
            videotype: form.resolution,
            videoframerate: form.frames,
            autoopenav: form.autoVideo ? 1 : 0,
            roomlayout: form.roomLayout,
            colour: form.color,
            roominfo: ""
          };
          formData = Object.assign(formData, this.params);
          this.http.editCLassroom(formData).then(res => {
            console.log(res.code === 110);
            if (res.code === 110) {
              this.showDialog = true;
              let error = res.error;
              for (let items of error) {
                console.log(items);
              }
            } else {
              this.$message.success(res.msg || "编辑成功！");
              this.$router.push("classroom");
            }
          });
        } else {
          this.disabled = false;
          this.$message.warning("请填写完整信息");
        }
      });
      console.log(this.form);
    },
    setRoomLayout(param) {
      this.form.roomLayout = param;
    },
    setColor(param) {
      this.form.color = param;
    },
    //获取教室详情
    getRoomInfo(params) {
      http.getClassroomDetail(params).then(res => {
        var info = res.data;
        var form = {
          roomName: info.roomname, //教室名称
          roomType: info.roomtype.toString(), //教室类型
          startTimeType: "1", //开始时间类型
          startTime: new Date(info.starttime).getTime(), //开始时间
          endTimeType: "0", //结束时间类型
          endTime: new Date(info.endtime).getTime(), //结束时间
          teacherPwd: info.chairmanpwd, //老师密码
          assistantPwd: info.assistantpwd, //助教密码
          patrolPwd: info.patrolpwd, //巡课密码
          studentPwd: info.confuserpwd, //学员密码
          studentPwdNeed: info.passwordrequired == 1 ? true : false, //学员是否需要密码
          autoVideo: info.autoopenav == 1 ? true : false, //是否自动开启音视频
          resolution: info.videotype, //视频分辨率
          frames: info.videoframerate, //视频帧数
          roomLayout: 1, //教室布局
          color: "purple" //颜色
        };
        this.form = form;
      });
    },
    //生成随机密码
    randomPwd(long) {
      return Math.floor((Math.random()+Math.floor(Math.random()*9+1))*Math.pow(10,long-1))
    },
    //判断数组重复
    isRepeat(arr) {
      var hash = {};
      for (var i in arr) {
        if (hash[arr[i]]) {
          return true;
        }
        // 不存在该元素，则赋值为true，可以赋任意值，相应的修改if判断条件即可
        hash[arr[i]] = true;
      }
      return false;
    }
  },
  created() {
    console.log(this.$route.query);
    this.form.teacherPwd = this.randomPwd(4);
    this.form.assistantPwd = this.randomPwd(4);
    this.form.patrolPwd = this.randomPwd(4);
    this.form.studentPwd = this.randomPwd(4);
    if (this.$route.query.id) {
      //有参数表明为编辑状态
      this.mode = "edit";
      var query = this.$route.query;
      this.params.id = query.id;
      this.params.serial = query.serial;
      this.getRoomInfo(this.params);
    }
  }
};
</script>
<style lang="scss" scoped>
.classroomMamage {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .sub-lable {
    width: 70px;
    text-align: right;
    padding-right: 2px;
  }
  .inner-cell {
    display: inline-block;
    width: 80;
  }
  .roomLayout {
    display: inline-block;
    width: 91px;
    height: 63px;
    position: relative;
    margin-right: 10px;
    cursor: pointer;
    .icon-select {
      width: 25px;
      height: 25px;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .color-box {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: 5px;
    cursor: pointer;
    .color-unit {
      width: 26px;
      height: 26px;
      margin: auto;
      margin-top: 2px;
    }
    .purple {
      background: #4f3d84;
    }
    .black {
      background: black;
    }
    .tigerlily {
      background: #f1633a;
    }
  }
  .color-border1 {
    border: 2px solid rgba(79, 61, 132, 0.6);
  }
  .color-border2 {
    border: 2px solid rgba(44, 44, 48, 0.6);
  }
  .color-border3 {
    border: 2px solid rgba(241, 99, 58, 0.6);
  }
}
</style>